{{include template('header','member')}}
<script type="text/javascript" src="/static/plugins/jquery/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="/static/plugins/cropper/3.1.6/cropper.css">
<script type="text/javascript" src="/static/plugins/cropper/3.1.6/cropper.js"></script>
<style>
    .img-container {
        width: 350px;
        height: 240px;
        float:left;
    }
    .img-container #pre_image {
        width: 100%;
    }
    .preview {
        float: left;
        overflow: hidden;
        margin-left: 20px;
        height: 240px;
    }
    .preview-lg {
        width: 240px;
        height: 240px;
    }
    .preview-md {
        width: 80px;
        height: 80px;
    }
    .preview-sm {
        width: 35px;
        height: 35px;
    }
    .form-div{
        width: 100%;
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>
<div class="w980 main">
    {{include template('left','member')}}
    <div class="main_right">
        <div class="tit"><h3>修改头像</h3></div>
        <div class="main_cont">
            <table cellspacing="0" cellpadding="0" class="table">
                <caption>
                    <h3>当前我的头像</h3>
                    <p>如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像 </p>
                </caption>
                <tbody>
                    <tr>
                        <td><img src="/api/index/avatar/?uid={{$uid}}&size=big&v={{random(4)}}"></td>
                    </tr>
                </tbody>
            </table>

            <table cellspacing="0" cellpadding="0" class="table">
                <caption>
                    <h3>设置我的新头像</h3>
                    <p>请选择一个新照片进行上传编辑。<br>头像保存后，您可能需要刷新一下本页面(按F5键)，才能查看最新的头像效果 </p>
                </caption>
                <tbody>
                    <tr>
                        <td>
                            <form action="/member/spacecp/avatar" method="POST" enctype="multipart/form-data">
                                <div class="form-div">
                                    <a href="javascript:;" class="file">选择文件
                                        <input type="file" name="face" accept="image/*" />
                                    </a>
                                </div>
                                <!-- 预览图片区域 -->
                                <div class="img-container">
                                    <img id="pre_image">
                                </div>
                                <!-- 三个缩略图预区域 -->
                                <div class="preview">
                                    <div class="preview_img preview-lg"></div>
                                    <div class="preview_img preview-md"></div>
                                    <div class="preview_img preview-sm"></div>
                                </div>
                                <!-- 保存裁切参数的四个框 -->
                                <input type="hidden" name="x"/>
                                <input type="hidden" name="y"/>
                                <input type="hidden" name="w"/>
                                <input type="hidden" name="h"/>
                                <div class="form-div">
                                    <input type="submit" value="确认" id="determine" class="btn btn-primary radius" style="display: none;" />
                                </div>
                            </form>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
var preImg = $("#pre_image");
// 获取裁切时的四个框
var x = $("input[name=x]");
var y = $("input[name=y]");
var w = $("input[name=w]");
var h = $("input[name=h]");
// 选择图片时预览图片 并 调用cropper插件
$("input[name=face]").change(function () {
    // 先消毁，清除一下插件，否则连续调用插件时会失败
    preImg.cropper("destroy");
    // this.files[0]：获取当前图片并转成URL地址
    var url = getObjectUrl(this.files[0]);
    console.log(url)
    // 设置url到预览图片上
    preImg.attr('src', url);
    // 调出插件
    preImg.cropper({
        aspectRatio: 16 / 9, // 裁切的框形状
        preview: '.preview_img', // 显示预览的位置
        viewMode: 3, // 显示模式：图片不能无限缩小，但可以放大
        // 裁切时把参数保存到表单中
        crop: function (event) {
            x.val(event.x);
            y.val(event.y);
            w.val(event.width);
            h.val(event.height);
        }
    });
    document.getElementById("determine").style.display = '';
});
// 预览时需要使用下面这个函数转换一下
function getObjectUrl(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
}

</script>
{{include template('footer','member')}}
